<template>
	<div>
		<h5>单元素 <button @click="isShow">is_show</button></h5>

		<transition name="move-down">
			<div class="simple" v-show="show">5</div>
		</transition>
		<div class="flex_box">
			<div>
				<h2>列表1(数组相同值BUG)</h2>
				<transition-group name="move-down" class="list_0" tag="ul">
					<li v-for="(item,index) in list2" class="li" :key="'c'+list[index]">
						{{item+'---'+list[index]}}
						<i class="el-icon-circle-close" @click="deleteList0(index)"></i>
					</li>
				</transition-group>
			</div>
	    <div>
		    <h2>列表2</h2>
				<div id="list-demo" class="demo">
				  <button v-on:click="add">Add</button>
				  <button v-on:click="remove">Remove</button>
				  <transition-group name="list" tag="p">
				    <span v-for="item in items" v-bind:key="item" class="list-item">
				      {{ item }}
				    </span>
				  </transition-group>
				</div>
	    </div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name:"TestTransition",
		data(){
			return {
				list:[1,2,3,4,5,7,6,8,9,10,11,12,13],
				list2:[1,1,1,1,1,1,1,1,1,1,1,1,1],
				show:!1,
				items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
			}
		},
		methods:{
			isShow(){
        this.show=!this.show
			},
			deleteList0(index){
        this.list2.splice(index,1);
        this.list.splice(index,1);
        console.log(this.list2);
        console.log(this.list)
			},
			randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
    	let n=this.randomIndex();
    	console.log(n)
      this.items.splice(n, 1)
    },
		}
	}
</script>

<style type="text/css">
  .simple{
  	width:100px;
  	height:100px;
  	background-color:#FF8C19;
  }
  .flex_box{
  	display: flex;
  }
  .flex_box>div{
  	flex:1;
  }
	.list_0{
		background-color:#f1f1f1;
	}
	.list_0 li{
		width:50px;
		height:50px;
		background-color:#3A95FF;
		float:left;
		margin:5px;
		position:relative;
		transition: all 2s linear;
	}
	.list_0 .el-icon-circle-close{
		position:absolute;
		top:12px;
		right:2px;
		color:#E21918;
		opacity: .8;
		cursor: pointer;
	}
	/*过渡*/
	.move-down-leave-active,.move-down-enter-active{
		transition:all 2s linear;
	}
	.move-down-enter,.move-down-leave-active{
		transform:translate(0,50px);
		opacity: 0;
	}

	.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>